<template>
  <div>
    <van-tabs
      title-active-color="#f18d94"
      color="#f18d94"
      :border="true"
      duration="0.6"
      v-model="activeName"
      animated
      swipeable
      @click="onClick"
    >
      <van-tab title="待付款" :badge="leftshopList.length" :tname="0">
         <slot name="left">
           <van-empty description="你还没有待付款订单！！！" />
         </slot>
      </van-tab>
      <van-tab title="待收货" :badge="centershopList.length" :name="1">
        <slot name="center">
           <van-empty description="你还没有待收货订单！！！" />
         </slot>
      </van-tab>
      <van-tab title="待评价" :badge="rightshopList.length" :name="2">
        <slot name="right">
           <van-empty description="你还没有待评价订单！！！" />
         </slot>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  props:["leftshopList","rightshopList","centershopList"],
  data() {
    return {
      activeName: 1,//通过这个可以监听切换
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  activated() {
   this.activeName= this.$route.query.type*1
  },
  //生命周期 - 挂载完成（访问DOM元素）
  methods: {
    onClick(){
      this.$emit('checked-switch',this.activeName)
    }
  },

};
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>